<template>
  <div>
    <button @click="addNum">+1</button>
    <button @click="minusNum">-1</button>
    <h1>仓库的数据{{ count }}</h1>
    <hr />
    <input type="text" :value="msg" @change="handler"/>
  </div>
</template>

<script>
export default {
  name: "",
  //计算属性:通过组件已有的数据计算出一个新的属性（属性值）
  computed: {
    //组件实例计算出一个新的属性count
    count() {
      //计算出新的属性，它的属性值就是仓库里面的数据
      //在组件内使用的时候比较方便
      return this.$store.state.count;
    },
    msg() {
      return this.$store.state.msg;
    },
  },
  methods: {
    //+1按钮的回调
    addNum() {
      //派发action
      this.$store.dispatch("addNum");
    },
    //-1按钮的回调
    minusNum() {
      this.$store.dispatch("minusNum");
    },
    //change事件的回调
    handler(event){
      //提交action
      this.$store.dispatch('updateMsg',event.target.value);
    }
  },
};
</script>

<style scoped>
</style>
